<template>
  <div>成绩等级显示：</div>
  <p v-if = "type == 'A'">优秀</p>
  <p v-else-if = "type == 'B'">良好</p>
  <p v-else-if = "type == 'C'">中等</p>
  <p v-else-if = "type == 'D'">及格</p>
  <p v-else>不及格</p>
  <button @click = "type = 'A'">切换优秀</button><br>
  <button @click = "type = 'C'">切换中等</button><br>
  <button @click = "type = 'D'">切换及格</button><br>
  <button @click = "type = 'E'">切换不及格</button><br>
  <button @click = "tran()">切换优秀</button><br>
  <button @click="randomGrade">切换随机</button>
</template>

<script setup>
import { ref } from 'vue';
let type = ref('B');
function tran(){
    type.value= "A";
}
 function randomGrade() { 
    type.value = ['A','B','C','D','E'][Math.floor(Math.random()*5)]; 
 } 
</script>

<style scoped>
</style>